<template>
	<view class="recharge-detail-container">
		<scroll-view class="scroll-box" scroll-y>
			<view class="banner-box" v-if="rechargeDetailInfo.image">
				<image :src="rechargeDetailInfo.image" mode=""></image>
			</view>
			<view class="rechange-info">
				<view class="name">{{ rechargeDetailInfo.name || '超值充值活动' }}</view>
				<view class="time">{{ rechargeDetailInfo.startTime || '' }} {{ rechargeDetailInfo.endTime || '' }}</view>
				<view class="desc">{{ rechargeDetailInfo.remark || '' }}</view>
			</view>

			<view class="recommend-box" v-if="recommendList.length > 0">
				<view class="title"><view>充值推荐</view></view>
				<scroll-view scroll-x class="item">
					<view @click="$u.route('/pages/user/recharge/recharge_detail?id=' + item.id)" class="activity-item" v-for="item in recommendList" :key="item.id">
						<view style="font-size: 35rpx; margin-top: 30rpx; font-weight: 600">{{ item.depositMoney + '元' || '充值优惠' }}</view>
						<view style="font-size: 25rpx; margin-top: 20rpx; color: #999999; white-space: normal">
							<text v-if="item.couponCount">赠送{{ item.couponCount }}张券</text>
							<text v-if="item.giveMoney">赠送{{ item.giveMoney }}元</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="gift-amount" v-if="couponList.length > 0">
				<GiftCouponVue title="赠送优惠券" :couponList="couponList"></GiftCouponVue>
			</view>

			<view class="activity-info" v-if="rechargeDetailInfo.introduce">
				<view class="title"><view>活动说明</view></view>
				<view class="content" v-html="rechargeDetailInfo.introduce"></view>
			</view>
		</scroll-view>

		<view class="footer">
			<view class="price">
				<view style="color: #e26c4c; font-size: 40rpx">
					<text style="font-size: 23rpx">到账</text>
					￥{{ rechargeDetailInfo.depositMoney + rechargeDetailInfo.giveMoney }}
				</view>
				<view style="font-size: 30rpx; margin-left: 10rpx; color: darkgray">
					<text style="font-size: 23rpx">赠送</text>
					￥{{ rechargeDetailInfo.giveMoney }}
				</view>
				<view style="flex: 1; color: #e26c4c; font-size: 40rpx; text-align: right">
					<text style="font-size: 23rpx">实付</text>
					￥{{ rechargeDetailInfo.depositMoney }}
				</view>
			</view>

			<view class="btn">
				<u-button :disabled="disabled" type="primary" @click="goRefillPay">立即充值</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import GiftCouponVue from './components/GiftCoupon.vue';
import { refillPay } from '@/common/util.js';
export default {
	components: { GiftCouponVue },
	data() {
		return {
			couponList: [],
			recommendList: [],
			rechargeDetailInfo: {
				giveMoney: 0,
				depositMoney: 0
			},
			disabled: true
		};
	},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.hideHomeButton();
		uni.setNavigationBarColor({
			frontColor: '#000000', // 设置文本颜色
			backgroundColor: '#ffffff' // 设置背景颜色
		});
		// #endif
	},
	onLoad({ id }) {
		this.getRechargeDetail(id);
	},
	methods: {
		async getRechargeDetail(id) {
			const res = await this.$api.getRechargeDetail({ id });
			this.couponList = res.data.ruleObject.couponList;
			this.rechargeDetailInfo = res.data.ruleObject;
			this.recommendList = res.data.recommendList;
			this.disabled = false;
			// console.log(this.couponList,this.recommendList);
		},
		goRefillPay() {
			refillPay(0, {
				id: this.rechargeDetailInfo.id,
				money: this.rechargeDetailInfo.depositMoney,
				giftAmount: this.rechargeDetailInfo.giveMoney
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.recharge-detail-container {
	height: 100vh;

	.scroll-box {
		height: calc(100% - 250rpx);
		background-color: #ffffff;

		.banner-box {
			width: 100%;
			height: 500rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.rechange-info {
			padding: 30rpx;

			.name {
				font-size: 40rpx;
				font-weight: 600;
			}

			.time {
				font-size: 22rpx;
				color: #a2a2a4;
				margin-top: 10rpx;
			}

			.desc {
				font-size: 28rpx;
				color: #a2a2a4;
				margin-top: 10rpx;
			}
		}

		.recommend-box {
			padding: 20rpx;
			white-space: nowrap;
			.item {
				width: 100%;
				.activity-item {
					display: inline-block;
					border: 2rpx solid #efb43f;
					background-color: #fff8ed;
					border-radius: 10rpx;
					box-sizing: border-box;
					padding: 20rpx;
					width: 33%;
					height: 210rpx;
					margin-right: 20rpx;
					text-align: center;
					overflow: hidden;
				}
			}
		}

		.gift-amount {
			padding: 20rpx;
		}

		.activity-info {
			background-color: #fff;
			min-height: 500rpx; // 删除
			padding: 0 30rpx 20rpx;
			width: 100%;
			.content {
				overflow: auto;
				background-color: #fff;
				width: 100%;
			}
		}
	}

	.footer {
		padding: 30rpx;
		height: 250rpx;
		border-top-right-radius: 15rpx;
		border-top-left-radius: 15rpx;
		background-color: #fff;

		.price {
			display: flex;
			align-items: center;
		}
		.btn {
			margin-top: 30rpx;
		}
	}
	.title {
		padding: 30rpx 10rpx;
		font-size: 35rpx;
		font-weight: 600;
		& > view {
			padding-left: 20rpx;
			border-left: 4rpx solid #edac2f;
		}
	}
}
</style>
